import { Button, Card, Descriptions } from 'antd'
import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { reqHosDetail } from '@api/hospital/hospitalList'
import {
  IhospitalListItem,
  IhosdetailRespone,
} from '@api/hospital/model/hospitalListTypes'

export default function HospitalListDetail() {
  const param = useParams()
  const nagivate = useNavigate()
  const [hospitalShow, setHospitalShow] = useState<IhosdetailRespone>({
    bookingRule: {
      cycle: 0,
      releaseTime: '',
      stopTime: '',
      quitTime: '',
      rule: [],
    },
    hospital: {
      id: '',
      createTime: '',
      param: {
        hostypeString: '',
        fullAddress: '',
      },
      hoscode: '',
      hosname: '',
      hostype: '',
      provinceCode: '',
      cityCode: '',
      districtCode: '',
      logoData: '',
      intro: '',
      route: '',
      status: 0,
    },
  })

  async function getHospitalDetail() {
    const id = param.id as string
    const result = await reqHosDetail(id)
    setHospitalShow(result)
  }

  useEffect(() => {
    getHospitalDetail()
  }, [])

  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {hospitalShow.hospital.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo" span={2}>
          <img
            src={'data:image/jpeg;base64,' + hospitalShow.hospital.logoData}
            style={{ width: 100 }}
            alt="logo"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编号">
          {hospitalShow.hospital.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hospitalShow.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {hospitalShow.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hospitalShow.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: 30 }}
      >
        <Descriptions.Item label="预约周期">
          {hospitalShow.bookingRule.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间" span={2}>
          {hospitalShow.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospitalShow.bookingRule.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hospitalShow.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {hospitalShow.bookingRule.rule.map((rule, index) => {
            return (
              <div  key={index}>
                {index + 1}.{rule}
              </div>
            )
          })}
        </Descriptions.Item>
      </Descriptions>
      <Button style={{ marginTop: 30 }} onClick={() => nagivate(-1)}>
        返回
      </Button>
    </Card>
  )
}
